<script setup>
import { ref, reactive } from "vue";
import "bootstrap-icons/font/bootstrap-icons.css";
import QuestionBankModal from "@/components/alert/admin/assessment/QuestionBankModal.vue";
import NewAssessmentModal from "@/components/alert/admin/NewAssessmentModal.vue";
import { modalControllers } from "@/stores/modalController.js";
import { storeToRefs } from "pinia";

const modalController = modalControllers();
// 筛选表单数据
const filterForm = reactive({
  type: "",
  status: "",
  dateRange: [],
  creator: "",
  keyword: "",
});

// 考核列表数据
const assessmentList = ref([
  {
    id: 1,
    name: "初级护理知识考核",
    type: "理论考试",
    status: "已发布",
    creator: "张三",
    createDate: "2023-01-15",
    participants: 120,
    passRate: "85%",
  },
  {
    id: 2,
    name: "心肺复苏技能考核",
    type: "技能考核",
    status: "进行中",
    creator: "李四",
    createDate: "2023-02-01",
    participants: 80,
    passRate: "92%",
  },
  {
    id: 3,
    name: "医院感染控制",
    type: "综合评估",
    status: "已结束",
    creator: "王五",
    createDate: "2023-03-10",
    participants: 200,
    passRate: "78%",
  },
  {
    id: 4,
    name: "药物管理规范",
    type: "理论考试",
    status: "草稿",
    creator: "张三",
    createDate: "2023-04-01",
    participants: 0,
    passRate: "0%",
  },
  {
    id: 5,
    name: "急诊护理流程",
    type: "技能考核",
    status: "已归档",
    creator: "赵六",
    createDate: "2022-11-20",
    participants: 150,
    passRate: "88%",
  },
]);

// 分页数据
const totalAssessments = ref(assessmentList.value.length);
const pageSize = ref(20);
const currentPage = ref(1);

// 搜索按钮点击事件
const onSearch = () => {
  console.log("筛选条件:", filterForm);
  // 这里可以添加实际的搜索逻辑，例如调用API
};

// 清空筛选按钮点击事件
const onClearFilter = () => {
  filterForm.type = "";
  filterForm.status = "";
  filterForm.dateRange = [];
  filterForm.creator = "";
  filterForm.keyword = "";
  console.log("筛选条件已清空");
  // 清空后可以重新加载数据
};
// 分页改变事件
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
  console.log("当前页:", newPage);
  // 实际的加载对应页数据逻辑
};

// 根据考核状态返回标签类型
const getStatusTagType = (status) => {
  switch (status) {
    case "已发布":
      return "success";
    case "进行中":
      return "warning";
    case "已结束":
      return "info";
    case "草稿":
      return "";
    case "已归档":
      return "info";
    default:
      return "";
  }
};
</script>

<template>
  <!-- 主要内容 -->
  <div class="container-fluid p-4">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :xs="24" :sm="12" :md="6" class="mb-4">
        <el-card shadow="hover" class="stats-card">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="bg-primary bg-gradient text-white rounded-circle p-3">
                <i class="bi bi-clipboard-check"></i>
              </div>
            </div>
            <div class="flex-grow-1 ms-3">
              <h6 class="mb-1">活跃考核</h6>
              <h4 class="mb-0">18</h4>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="mb-4">
        <el-card shadow="hover" class="stats-card">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="bg-success bg-gradient text-white rounded-circle p-3">
                <i class="bi bi-people"></i>
              </div>
            </div>
            <div class="flex-grow-1 ms-3">
              <h6 class="mb-1">参与人次</h6>
              <h4 class="mb-0">342</h4>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="mb-4">
        <el-card shadow="hover" class="stats-card">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="bg-info bg-gradient text-white rounded-circle p-3">
                <i class="bi bi-question-circle"></i>
              </div>
            </div>
            <div class="flex-grow-1 ms-3">
              <h6 class="mb-1">题库总量</h6>
              <h4 class="mb-0">520</h4>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="mb-4">
        <el-card shadow="hover" class="stats-card">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="bg-warning bg-gradient text-white rounded-circle p-3">
                <i class="bi bi-graph-up"></i>
              </div>
            </div>
            <div class="flex-grow-1 ms-3">
              <h6 class="mb-1">平均通过率</h6>
              <h4 class="mb-0">82%</h4>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 操作按钮 -->
    <el-row class="mb-4">
      <el-col :span="24">
        <el-card shadow="hover" class="assessment-card">
          <div class="d-flex justify-content-between align-items-center">
            <div>
              <h5 class="mb-0">考核管理</h5>
            </div>
            <div>
              <el-button
                type="info"
                plain
                @click="modalController.openPopup('questionBankModal')"
              >
                <i class="bi bi-database-fill me-1"></i> 题库管理
              </el-button>
              <el-button
                type="primary"
                @click="modalController.openPopup('newAssessmentModal')"
              >
                <i class="bi bi-plus-circle me-1"></i> 创建考核
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 筛选器 -->
    <el-row class="mb-4">
      <el-col :span="24">
        <el-card shadow="hover">
          <el-form :model="filterForm" label-width="80px" label-position="left">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="考核类型">
                  <el-select v-model="filterForm.type" placeholder="全部类型">
                    <el-option label="全部类型" value=""></el-option>
                    <el-option label="理论考试" value="theory"></el-option>
                    <el-option label="技能考核" value="skill"></el-option>
                    <el-option
                      label="综合评估"
                      value="comprehensive"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="考核状态">
                  <el-select v-model="filterForm.status" placeholder="全部状态">
                    <el-option label="全部状态" value=""></el-option>
                    <el-option label="草稿" value="draft"></el-option>
                    <el-option label="已发布" value="published"></el-option>
                    <el-option label="进行中" value="in_progress"></el-option>
                    <el-option label="已结束" value="ended"></el-option>
                    <el-option label="已归档" value="archived"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="时间范围">
                  <el-date-picker
                    v-model="filterForm.dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-button type="primary" @click="onSearch">
                    <i class="bi bi-search me-1"></i> 查询
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="mt-3">
              <el-col :span="12">
                <el-form-item label="创建人">
                  <el-input
                    v-model="filterForm.creator"
                    placeholder="输入创建人姓名"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="关键词">
                  <el-input
                    v-model="filterForm.keyword"
                    placeholder="输入考核名称关键词"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" class="text-end">
                <el-button @click="onClearFilter">
                  <i class="bi bi-x-circle"></i> 清空筛选
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <!-- 考核列表 -->
    <el-row class="mb-4">
      <el-col :span="24">
        <el-card shadow="hover">
          <div
            class="card-header d-flex justify-content-between align-items-center"
          >
            <h5 class="mb-0">考核列表</h5>
            <el-input>
              <!--              v-model="searchQuery"-->
              placeholder="搜索考核..." class="search-input" >
              <template #prefix>
                <i class="bi bi-search"></i>
              </template>
            </el-input>
          </div>
          <el-table :data="assessmentList" style="width: 100%">
            <el-table-column
              prop="name"
              label="考核名称"
              width="200"
            ></el-table-column>
            <el-table-column
              prop="type"
              label="类型"
              width="100"
            ></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getStatusTagType(scope.row.status)"
                  >{{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="creator"
              label="创建人"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="createDate"
              label="创建日期"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="participants"
              label="参与人次"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="passRate"
              label="通过率"
              width="100"
            ></el-table-column>
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="handleEdit(scope.row)"
                  >编辑
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.row)"
                  >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handlePageChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="totalAssessments"
            layout="prev, pager, next"
            background
            class="mt-4 justify-content-center"
          ></el-pagination>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <!--  &lt;!&ndash; 弹窗组件 &ndash;&gt;-->
  <!--  <QuestionBankModal v-model="modalController.popups.questionBankModal" />-->
  <NewAssessmentModal v-model="modalController.popups.newAssessmentModal" />
</template>

<style scoped>
.assessment-card {
  .card-header {
    background-color: var(--el-fill-color-light);
    padding: 10px 20px;
    border-bottom: 1px solid var(--el-border-color-light);
    border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
  }
}

.search-input {
  max-width: 250px;
}

.el-pagination {
  justify-content: flex-end;
}

.stats-card {
  .bi {
    font-size: 2.5rem;
  }
}
</style>
